<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <shopee-row class="row">
        <shopee-col :span="6" vertical-align="center">
          <div v-if="userPermission === 2">
            <shopee-input v-model="add_form.username" disabled></shopee-input>
          </div>
          <div v-else>
            <shopee-input v-model="add_form.username"></shopee-input>
          </div>
        </shopee-col>
        <shopee-col :span="2" vertical-align="center">
          <shopee-select class="select" placeholder="Select" v-model="add_form.type">
            <div v-if="userPermission === 0">
              <shopee-option label="1" vaule="1">admin</shopee-option>
              <shopee-option label="2" vaule="2">member</shopee-option>
            </div>
            <div v-if="userPermission === 1">
              <shopee-option vaule="1" disabled>admin</shopee-option>
              <shopee-option vaule="2">member</shopee-option>
            </div>
            <div v-if="userPermission === 2">
              <shopee-option disabled>admin</shopee-option>
              <shopee-option disabled>member</shopee-option>
            </div>
          </shopee-select>
        </shopee-col>
        <shopee-col :span="2" vertical-align="center">
          <div v-if="userPermission === 2">
            <el-button type="primary" disabled>添加新用户</el-button>
          </div>
          <div v-else>
            <el-button type="primary" @click="addUser(add_form)">添加新用户</el-button>
          </div>
        </shopee-col>
      </shopee-row>
      <br>
      <shopee-table :data="adminPersionDataTable" style="width: 85%">
        <shopee-table-column prop="id" label="序号" fixed="left" :width=100></shopee-table-column>
        <shopee-table-column prop="project_name" label="项目" :width=150></shopee-table-column>
        <shopee-table-column prop="username" label="用户名" :width=250></shopee-table-column>
        <shopee-table-column label="权限级别" :width=300>
          <template slot-scope="props">
            <div v-if="props.row.type === 1">Admin</div>
            <div v-if="props.row.type === 2">Member</div>
            <div v-if="props.row.type === 0">Super-admin</div>
          </template>
        </shopee-table-column>
        <shopee-table-column label="操作" :width=400 fixed="right">
            <template slot-scope="props">
              <div v-if="userPermission === 0">
                <div v-if="props.row.type === 1">
                  <el-button  size="small" type="primary" @click="editUser(props.row.username,type=2)" outline>改为Member</el-button>
                  <el-button  size="small" type="primary" @click="deleteUser(props.row.username)" outline>Remove</el-button>
                </div>
                <div v-if="props.row.type === 2">
                  <el-button  size="small" type="primary" @click="editUser(props.row.username,type=1)" outline>改为Admin</el-button>
                  <el-button  size="small" type="primary" @click="deleteUser(props.row.username)" outline>Remove</el-button>
                </div>
                <div v-if="props.row.type === 0">
                  权限MAX
                </div>
              </div>
              <div v-if="userPermission === 1">
                <div v-if="props.row.type === 1">
                  <el-button  size="small" type="primary" @click="editUser(props.row.username,type=2)" outline>修改为Member</el-button>
                </div>
                <div v-if="props.row.type === 2">
                  <el-button  size="small" type="primary" @click="editUser(props.row.username,type=1)" outline>修改为Admin</el-button>
                </div>
                <div v-if="props.row.type === 0">
                  无权限修改
                </div>
              </div>
              <div v-if="userPermission === 2">
                <div v-if="props.row.type === 1">
                  无权限修改
                </div>
                <div v-if="props.row.type === 2">
                  无权限修改
                </div>
                <div v-if="props.row.type === 0">
                  无权限修改
                </div>
              </div>
           </template>
        </shopee-table-column>
      </shopee-table>
    </div>
  </el-card>
</template>

  <script>
    import {api, getRequest, postRequest} from "@/api/commit";

    export default {
      name : "AdminPersion",
      data() {
        return {
          adminPersionDataTable: [],
          userPermission: 2,
          add_form:{
            username:'',
            project_id: this.$route.query.id,
            type:''
          }
        }
      },
      methods: {
        init_data() {
          let params ={
            "project_id": this.$route.query.id
          }
          getRequest(api['permission_project_user_list'],params).then((res) => {
            res = res.resultReturn
            this.adminPersionDataTable= res.data
          }, (error) => {
            console.info(error)
          }),
          getRequest(api['permission_user'],params).then((res) => {
            res = res.resultReturn
            if (res.data.length===0){
              this.userPermission = 2
            }else{
              this.userPermission = res.data[0].type
            }
            console.log(this.userPermission)
          }, (error) => {
            console.info(error)
            this.userPermission = 2
          })
        },
        addUser(add_form) {
          let params = Object.assign({}, this.add_form);
          if (params.type==="admin"){
            params.type=1
          }else{
            params.type=2
          }
          params.project_id = parseInt(params.project_id)
          console.log(params)
          postRequest(api['permission_user_add'],params).then((res) => {
            res = res.resultReturn
            this.init_data()
          }, (error) => {
            console.info(error)
          })
        },
        editUser(username,type) {
          let params = {
            username:username,
            project_id:this.$route.query.id,
            type:type
          }
          console.log(params)
          postRequest(api['permission_user_edit'],params).then((res) => {
            res = res.resultReturn
            this.init_data()
          }, (error) => {
            console.info(error)
          })
        },
        deleteUser(username) {
          let params = {
            username:username,
            project_id:this.$route.query.id,
          }
          console.log(params)
          postRequest(api['permission_user_delete'],params).then((res) => {
            res = res.resultReturn
            this.init_data()
          }, (error) => {
          })
        },
      },
      created () {
        this.init_data()
      }
    }
  </script>
